﻿<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" type="text/javascript">

//初始化数据库
function initDatabase() {
	try {
	    if (!window.openDatabase) {
	        alert('Databases are not supported by your browser');
	    } else {
	        var shortName = 'YARINDB';
	        var version = '1.0';
	        var displayName = 'yarin db';
	        var maxSize = 100000; // in bytes
	        YARINDB = openDatabase(shortName, version, displayName, maxSize);
			createTables();
			selectAll();
            
	    }
	} catch(e) {
	    if (e == 2) {
	        // Version mismatch.
	        console.log("Invalid database version.");
	    } else {
	        console.log("Unknown error "+ e +".");
	    }
	    return;
	} 
}

function createTables(){
	YARINDB.transaction(
        function (transaction) {
        	transaction.executeSql('CREATE TABLE IF NOT EXISTS yarin(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL,desc TEXT NOT NULL);', [], nullDataHandler, errorHandler);
        }
    );
	insertData();
}

function insertData(){
	YARINDB.transaction(
	    function (transaction) {
		//Starter data when page is initialized
		var data = ['1','yarin yang','I am yarin'];  
		
		transaction.executeSql("INSERT INTO yarin(id, name, desc) VALUES (?, ?, ?)", [data[0], data[1], data[2]]);
	    }
	);	
}

function errorHandler(transaction, error){
 	if (error.code==1){
 		// DB Table already exists
 	} else {
    	// Error is a human-readable string.
	    console.log('Oops.  Error was '+error.message+' (Code '+error.code+')');
 	}
    return false;
}


function nullDataHandler(){
	console.log("SQL Query Succeeded");
}

function selectAll(){ 
	YARINDB.transaction(
	    function (transaction) {
	        transaction.executeSql("SELECT * FROM yarin;", [], dataSelectHandler, errorHandler);
	    }
	);	
}

function dataSelectHandler(transaction, results){
	// Handle the results
    for (var i=0; i<results.rows.length; i++) {
    	var row = results.rows.item(i);
        var newFeature = new Object();
    	newFeature.name   = row['name'];
        newFeature.decs = row['desc'];
        
        document.getElementById("name").innerHTML="name:"+newFeature.name;
        document.getElementById("desc").innerHTML="desc:"+newFeature.decs;
    }
}

function updateData(){
	YARINDB.transaction(
	    function (transaction) {
	    	var data = ['fengsheng yang','I am fengsheng']; 
	    	transaction.executeSql("UPDATE yarin SET name=?, desc=? WHERE id = 1", [data[0], data[1]]);
	    }
	);	
	selectAll();
}

function ddeleteTables(){
	YARINDB.transaction(
	    function (transaction) {
	    	transaction.executeSql("DROP TABLE yarin;", [], nullDataHandler, errorHandler);
	    }
	);
	console.log("Table 'page_settings' has been dropped.");
}


//定位
function get_location() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});
	} else {
		alert("Your browser does not support HTML5 geoLocation");
	}
}
	
function show_map(position) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	var city = position.coords.city;
	//telnet localhost 5554
	//geo fix -82.411629 28.054553
	//geo fix -121.45356 46.51119 4392
	//geo nmea $GPGGA,001431.092,0118.2653,N,10351.1359,E,0,00,,-19.6,M,4.1,M,,0000*5B
	document.getElementById("Latitude").innerHTML="latitude:"+latitude;
	document.getElementById("Longitude").innerHTML="longitude:"+longitude;
	document.getElementById("City").innerHTML="city:"+city;
}
	
function handle_error(err) {
	switch (err.code) {
	case 1:
		alert("permission denied");
		break;
	case 2:
		alert("the network is down or the position satellites can't be contacted");
		break;
	case 3:
		alert("time out");
		break;
	default:
		alert("unknown error");
		break;
	}
}

function initLocalStorage(){
	if (window.localStorage) {
		textarea.addEventListener("keyup", function() {
			window.localStorage["value"] = this.value;
			window.localStorage["time"] = new Date().getTime();
		}, false);
	} else {
		alert("LocalStorage are not supported in this browser.");
	}
}

window.onload = function() {
	initDatabase();
	initLocalStorage();
	get_location();
}
</script>

<script language="javascript" type="text/javascript">
	function getFromAndroid(str){
 		document.getElementById("android").innerHTML=str;
	}
	function sendToAndroid(){
 		var str = "from JavaScript";
 		window.injs.runOnAndroidJavaScript(str);//调用android的函数 
	}
	function ale()
	{
	    alert("This is an alert!");
	}
</script>

</head>
<body>
	<div><input type="submit" name="Submit" value="alert" onclick="ale()" /></div>
	
	<input type="button" value="Send To Android"  onclick="sendToAndroid()"/>
	<div id="android">JavaScript itme</div>
<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="alert('1')">New...</button>
   <button type="button" onclick="alert('1')">Open...</button>
   <button type="button" onclick="alert('1')">Save</button>
   <button type="button" onclick="alert('1')">Save as...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="alert('1')">Copy</button>
   <button type="button" onclick="alert('1')">Cut</button>
   <button type="button" onclick="alert('1')">Paste</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Help</a></li>
   <li><a href="about.html">About</a></li>
  </menu>
 </li>
</menu>

	<textarea id="textarea"></textarea>
	<input type='button' value='get' onClick="alert(window.localStorage['value']+':'+window.localStorage['time'])"/>
	<input type="date" id="date" />
    <input  type="datetime" id="datetime" />
    <input type="email" id="email"  />
    <input type="number" id="email1" />
	<div id="name"></div>
	<div id="desc"></div>
	<input type="button" value="updateData"  onclick="updateData()"/>
	
	<div id="Latitude"></div>
	<div id="Longitude"></div>
	<div id="City"></div>
</body>
</html>